<!--  -->
<template>
  <div class="container"
       ref="citySelect">
    <div class="city-item">
      <el-select v-model="city.province"
                 placeholder="请选择"
                 @change="province">
        <el-option v-for="item in provinceList"
                   :key="item.provinceCode"
                   :label="item.province"
                   :value="item.provinceCode">
        </el-option>
      </el-select>
      省
    </div>
    <div class="city-item">
      <el-select v-model="city.city"
                 placeholder="请选择"
                 @change="selectCity">
        <el-option v-for="item in cityList"
                   :key="item.cityCode"
                   :label="item.city"
                   :value="item.cityCode">
        </el-option>
      </el-select>
      市
    </div>
    <div class="city-item">
      <el-select v-model="city.area"
                 placeholder="请选择"
                 @change="area">
        <el-option v-for="item in areaList"
                   :key="item.areaCode"
                   :label="item.area"
                   :value="item.areaCode">
        </el-option>
      </el-select>
      区
    </div>
  </div>
</template>

<script>
import { getAllprovince, getCitycode, getAreacode } from '@/api/app'
export default {
  name: 'BaseCity',
  props: {
    data: {
      type: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      city: {
        province: '',
        city: '',
        area: ''
      },
      address: {
        province: '',
        provinceCode: '',
        city: '',
        cityCode: '',
        area: '',
        areaCode: ''
      }
    }
  },
  watch: {
    data (n, o) {
      if (!n || !n.provinceCode) {
        return false
      }
      console.log(n)
      this.city.province = n.provinceCode
      this.getCitycode(n.provinceCode) // 获取市
      this.getAreacode(n.cityCode) // 获取县
      this.city = {
        province: n.provinceCode,
        city: n.cityCode,
        area: n.areaCode
      }
    }
  },
  created () {
    this.getAllprovince()
    this.city.province = this.data.provinceCode
    this.getCitycode(this.data.provinceCode) // 获取市
  },
  methods: {
    // 省
    async getAllprovince () {
      const res = await getAllprovince({})
      this.provinceList = res.data
    },
    // 市
    async getCitycode (code) {
      const res = await getCitycode({ provinceCode: code })
      this.cityList = res.data
    },
    // 区
    async getAreacode (code) {
      const res = await getAreacode({ cityCode: code })
      this.areaList = res.data
    },
    province (code) {
      this.getCitycode(code)
      this.cityList = []
      this.areaList = []
      this.city = { ...this.city, ...{ city: '', area: '' } }
      const obj = this.handleData()
      this.$emit('cityData', obj)
    },
    selectCity (code) {
      this.getAreacode(code)
      this.city = { ...this.city, ...{ area: '' } }
      this.areaList = []
      const obj = this.handleData()
      this.$emit('cityData', obj)
    },
    area (code) {
      const obj = this.handleData()
      this.$emit('cityData', obj)
    },
    // 处理数据
    handleData () {
      const province = this.provinceList.find((item) => { return item.provinceCode === this.city.province }) || {}
      const city = this.cityList.find((item) => { return item.cityCode === this.city.city }) || {}
      const area = this.areaList.find((item) => { return item.areaCode === this.city.area }) || {}
      const obj = {
        province,
        city,
        area
      }
      return obj
    }
  }
}
</script>
<style lang='less' scoped>
.container {
  font-size: 0px;
  .city-item{
    display: inline-block;
    width: 125px;
    .el-select{
      width: 95px;
      margin-right: 10px;
    }
  }
  .city-item + .city-item{
      margin-left: 10px;
    }
}
</style>
